<script>
/*
 * @Author: Zhang Yingying
 * @Date: 2020-10-24 17:37:30
 * @LastEditors: Zhang Yingying
 * @LastEditTime: 2020-11-07 16:52:42
 */
/* eslint-disable */
import Vue from "vue";
import Component from "vue-class-component";
import { Inject, Prop } from "vue-property-decorator";
import RadioGroup from "../components/radio-group.vue";
import ComboxControl from "../components/combox-control.vue";
import TextControl from "../components/text-control.vue";
import CheckboxGroup from "../components/checkbox-group.vue";
import { isObj } from "../utils";
@Component({
  name: "FormControl",
  components: {
    RadioGroup,
    TextControl,
    ComboxControl,
    CheckboxGroup
  }
})
export default class FormControl extends Vue {
  @Prop({
    required: true
  })
  value;

  get prop() {
    return this.$attrs.prop;
  }

  @Inject("form")
  form;

  options = [];

  setValue(value) {
    this.form.$emit("set-value", {
      prop: this.prop,
      value
    });
    return this;
  }

  setAttrs(attrs) {
    this.form.$emit("set-attrs", {
      prop: this.prop,
      attrs
    });
    return this;
  }

  render(h) {
    var { tag, style, getDataList, slots, ...rest } = this.$attrs;
    var transformSlots = {};
    isObj(slots) &&
      Object.entries(slots).forEach(([prop, func]) => {
        transformSlots[prop] = () => {
          return func.apply(this, this.$createElement, this.value);
        };
      });

    var tagName = null;
    if (tag == "el-radio-group") {
      tag = "RadioGroup";
    } else if (tag == "el-checkbox-group") {
      tag = "CheckboxGroup";
    } else if (
      ["span", "p", "a", "h1", "h2", "h3", "h4", "h5", "h6"].includes(tag)
    ) {
      tagName = tag;
      tag = "TextControl";
    } else if (tag === "el-select") {
      tag = "combox-control";
      rest.type = "select";
    }
    var options =
      typeof getDataList === "function" ? this.options : rest.options;
    return h(tag, {
      props: {
        ...rest,
        value: this.value,
        options
      },
      attrs: {
        ...rest,
        tag: tagName,
        options
      },
      on: {
        ...this.$listeners,
        input: val => {
          this.$emit("input", val);
        }
      },
      scopedSlots: {
        //组件在内部的插槽
        // ...transformSlots,
        prefix: props => {
          var h = this.$createElement;
          return h("span", "12321");
        }
      }
    });
  }

  async reloadControl() {
    var { prop, getDataList } = this.$attrs;
    if (typeof getDataList !== "function") {
      return;
    }
    let resp = await getDataList(this.form.model[prop], this.form.model);
    if (Array.isArray(resp)) {
      this.options = resp;
    }
  }

  mounted() {
    var { prop } = this.$attrs;
    this.form.$emit("ready", prop, this);
    this.reloadControl();
  }
}
</script>
